<template>
	<div class="bookdetail">
		<h1 style="color: white;" @click="ret()">
			<i class="el-icon-arrow-left"></i>
		</h1>
		<div class="book">
			<img :src="`http://127.0.0.1/api/public/showimg/${book.pic}`" />
			<div style="width: 40%;">
				<h2>{{book.name}}</h2>
				<p @click="search()">
					{{book.author}}<i class="el-icon-arrow-right"></i>
				</p>
				<h4 style="opacity: 0.7;">
					{{book.maker}}
				</h4>
				<h4 style="opacity: 0.7;">
					{{book.tmake}}出版
				</h4>
			</div>
			<div style="width: 40%;text-align: center; color: #c5c5c5;" @click="">
				<i style="font-size: 2rem;" class="el-icon-star-off"></i>
				<p style="color: #c5c5c5;">收藏宝贝</p>
				<el-rate v-model="book.rates" disabled show-score text-color="#ff9900" score-template="{value}">
				</el-rate>
			</div>
		</div>
		<div class="detail">
			<div class="profile">
				<p v-html="book.info"></p>
			</div>
			<div class="purchased">
				<button style="margin-right: 10%;" @click="addCart()">加入购物车</button>
				<!-- <button>购买</button> -->
			</div>
			<div class="comments">
				<h3>评论：</h3>
				<textarea style="width: 98%;" cols="50" rows="5" v-model="content"></textarea>
				<div class="block">
					<el-rate v-model="rate" :colors="colors">
					</el-rate>评分
					<el-button type="danger" plain @click="comment()">发表</el-button>
				</div>
			</div>
			<div class="commentsArea">
				<fieldset>
					<legend>评论区</legend>
					<ul>
						<li v-for="(item, i) in contents">
							<img :src="`http://127.0.0.1/api/public/showimg/${item.img}`" />
							<div>
								<div style="display: flex; height: 2rem;">
									{{item.nickname}}
									<span style="padding-left: 2rem;">
										{{item.tpost}}
									</span>
									<el-rate v-model="item.rate" disabled :colors="colors" style="padding-left: 2rem;">
									</el-rate>
								</div>
								<div>
									{{item.content}}
								</div>
							</div>
						</li>
					</ul>
				</fieldset>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileBookDetail',
		data() {
			return {
				book: {
					author: '',
					id: '',
					info: '',
					name: '',
					maker: '',
					name: '',
					pic: '',
					price: '',
					salenum: '',
					sn: '',
					stock: '',
					tmake: ''
				},
				contents: [],
				content: '',
				rate: 0,
				total: 0,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900']
			}
		},
		// created() {
		// 	this.book.info = this.book.info.replaceAll('，', '，<br/>')
		// },
		async mounted() {
			await this.$axios.get("/api/public/book/findById/" + this.$route.params.bookid).then(res => {
				this.book = res.data.data
				this.book.tmake = this.book.tmake.slice(0, 10)
				this.book.info = this.book.info.replaceAll('，', '，<br/>')
				this.book.info = this.book.info.replaceAll(' ', '<br/>')
			})
			await this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/0").then(res => {
				this.total = res.data.data.total
			})
			await this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/" + this.total)
				.then(res => {
					this.contents = res.data.data.comments
					this.contents.forEach((item, i) => {
						item.tpost = item.tpost.slice(0, 10)
					})
				})
		},
		methods: {
			search() {
				this.$router.push({
					path: '/mobile/booklist',
					query: {
						title: this.book.author
					}
				})
			},
			ret() {
				this.$router.go(-1)
			},
			addCart() {
				if (this.$store.state.token != null) {
					this.$axios.get("/api/public/addCart/" + this.$route.params.bookid, this.$store.state.token).then(
						res => {
							this.total = res.data.data.total
						})
				} else {
					this.$router.push({
						path: '/login'
					});
				}
			},
			comment() {
				if (this.$store.state.token != null) {
					let fd = new FormData();
					fd.append("content", this.content)
					fd.append("rate", this.rate)
					this.$axios.post("/api/public/rate/add/" + this.book.id, fd, this.$store.state.token).then(res => {
						this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/0").then(res => {
								this.total = res.data.data.total
								this.$axios.get("/api/public/rate/findByBookid/" + this.$route.params.bookid + "/1/" + this.total).then(res => {
										this.contents = res.data.data.comments
										this.contents.forEach((item, i) => {
											item.tpost = item.tpost.slice(0, 10)
										})
									})
							})
						
					})
				} else {
					this.$router.push({
						path: '/login'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.bookdetail {
		width: 100%;
		height: auto;
		background: url('../../assets/img/mobile/background.jpg');
		background-size: 100% 100%;
	}

	.bookdetail .book {
		height: 30vh;
		display: flex;
		align-items: center;
	}

	.bookdetail .book img {
		width: 6rem;
		height: 9rem;
		margin-left: 1.5rem;
	}

	.bookdetail .book div {
		margin-left: 1rem;
	}

	.bookdetail .book div h2,
	p,
	h4 {
		color: white;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}

	.bookdetail .detail {
		width: 100%;
		min-height: 63vh;
		height: auto;
		background-color: white;
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
		opacity: 0.8;
	}

	.bookdetail .profile {
		width: 25rem;
		margin-left: 10%;
		padding-top: 10%;
		font-size: 1.2rem;
		box-sizing: border-box;
	}
	
	.bookdetail .profile p {
		color: black;
		line-clamp: 2;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		
		display: -moz-box;
		-moz-box-orient: vertical;
		-moz-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bookdetail .purchased {
		width: 60%;
		float: right;
	}

	.bookdetail .purchased button {
		width: 7rem;
		height: 2rem;
		background-color: #ff6a6a;
		border: 1px solid #ca2e2e;
		border-radius: 0.5rem;
		color: white;
	}

	.bookdetail .comments {
		margin-top: 10%;
	}

	.bookdetail .comments .block {
		display: flex;
	}

	.bookdetail .comments .block button {
		margin-left: 40%;
		width: 6rem;
	}

	.bookdetail .commentsArea {
		margin-top: 5%;
	}

	.bookdetail .commentsArea ul li {
		height: 5rem;
		display: flex;
	}

	.bookdetail .commentsArea ul li img {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
	}

	.bookdetail .commentsArea ul li div {
		font-size: 0.8rem;
		margin-left: 0.5rem;
	}
</style>